<template>
  <div>
    <!-- 搜索 -->
    <div class="ser_div">
      <el-row>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 订单号 </el-col>
            <el-col :span="16">
              <el-input v-model="ser.order_number" type="number"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <!-- <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 流水号 </el-col>
            <el-col :span="16">
              <el-input v-model="ser.serial_number"></el-input>
            </el-col>
          </el-row>
        </el-col> -->
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 客户 </el-col>
            <el-col :span="16">
              <el-select v-model="ser.customer_id" filterable clearable placeholder="请选择客户" style="width: 100%">
                <el-option v-for="(item, index) in CustomerList" :key="index" :label="item.customer_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 产品 </el-col>
            <el-col :span="16">
              <el-select v-model="ser.product_id" filterable clearable @change="product_id_change" placeholder="请选择产品"
                style="width: 100%">
                <el-option v-for="(item, index) in productList" :key="index" :label="item.product_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 型号 </el-col>
            <el-col :span="16">
              <el-select filterable clearable v-model="ser.model_number_id" placeholder="请选择型号" style="width: 100%">
                <el-option v-for="(item, index) in ModelNumberList" :key="index" :label="item.model_number"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <!-- <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 是否已收余款 </el-col>
            <el-col :span="16">
              <el-select
                filterable
                v-model="ser.is_residual_payment"
                style="width:60%"
              >
                <el-option
                  label="是"
                  :value="1"
                >
                </el-option>
                <el-option
                  label="否"
                  :value="2"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col> -->
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 订单日期范围 </el-col>
            <el-col :span="16">
              <el-date-picker v-model="order_data" @change="order_data_change" value-format="yyyy-MM-dd"
                type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-button @click="search(0)" class="add_btn" icon="el-icon-search">查询</el-button>
          <el-button @click="searchreset" icon="el-icon-refresh" class="add_btn">重置</el-button>
          <el-button @click="search(2)" icon="el-icon-plus" class="add_btn"
            v-permission="['dingdanshenhe_daochu']">导出</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table :data="dataList" v-loading="loading" stripe style="width: 100%" border>
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column label="审核进度" width="280">
        <template slot-scope="scope">
          <div style="
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              text-align: center;
            ">
            <div v-for="(item, index) in scope.row.audit_log" :key="index">
              <div style="
                  width: 100%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  text-align: center;
                ">
                <div v-if="item.order_audit_name == 'info_status'">
                  <div :class="[
                    'line',
                    scope.row.info_status == 1
                      ? ' tongguo'
                      : scope.row.info_status == 2
                        ? 'weishenhe'
                        : 'bohui',
                  ]" @dblclick="db_pushorder(item.remark, scope.row.info_status)">
                    <span>订单</span>
                    <span>审核</span>
                  </div>
                  <p style="padding: 0; margin: 0">
                    {{
                      scope.row.info_status == 1
                        ? "已通过"
                        : scope.row.info_status == 2
                          ? "未审核"
                          : "已驳回"
                    }}
                  </p>
                </div>

                <span v-if="(item.order_audit_name == 'info_status') &
                  (scope.row.audit_log.length > 1)
                " class="el-icon-caret-right"
                  style="font-size: 30px; color: chocolate; margin-bottom: 24px"></span>
                <div v-if="item.order_audit_name == 'material_status'">
                  <div :class="[
                    'line',
                    scope.row.material_status == 1
                      ? ' tongguo'
                      : scope.row.material_status == 2
                        ? 'weishenhe'
                        : 'bohui',
                  ]" @dblclick="
                    db_pushorder(item.remark, scope.row.material_status)
                    ">
                    <span>物料</span>
                    <span>审核</span>
                  </div>
                  <p style="padding: 0; margin: 0">
                    {{
                      scope.row.material_status == 1
                        ? "已通过"
                        : scope.row.material_status == 2
                          ? "未审核"
                          : "已驳回"
                    }}
                  </p>
                </div>
                <span v-if="item.order_audit_name == 'material_status' &&
                  scope.row.audit_log.length > 2
                " class="el-icon-caret-right"
                  style="font-size: 30px; color: chocolate; margin-bottom: 24px"></span>
                <span v-if="item.order_audit_name == 'material_status' &&
                  (index == 0) & (scope.row.audit_log.length > 1)
                " class="el-icon-caret-right" style="font-size: 30px; color: chocolate; margin-bottom: 24px"></span>

                <div v-if="item.order_audit_name == 'financial_status'">
                  <div :class="[
                    'line',
                    scope.row.financial_status == 1
                      ? ' tongguo'
                      : scope.row.financial_status == 2
                        ? 'weishenhe'
                        : 'bohui',
                  ]" @dblclick="
                    db_pushorder(item.remark, scope.row.financial_status)
                    ">
                    <span>财务</span>
                    <span>审核</span>
                  </div>
                  <p style="padding: 0; margin: 0">
                    {{
                      scope.row.financial_status == 1
                        ? "已通过"
                        : scope.row.financial_status == 2
                          ? "未审核"
                          : "已驳回"
                    }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="serial_number" label="流水号" width="120">
      </el-table-column> -->
      <el-table-column prop="order_number" label="订单号" width="120">
      </el-table-column>
      <el-table-column label="紧急程度" width="120" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.emergency_procedure == 1" style="color: #6880c6; font-weight: bold">普通</span>
          <span v-if="scope.row.emergency_procedure == 2" style="color: #e77911; font-weight: bold">紧急</span>
          <span v-if="scope.row.emergency_procedure == 3" style="color: #e71f11; font-weight: bold">十万火急</span>
        </template>
      </el-table-column>
      <el-table-column prop="delivery_date" label="业务员">
        <template slot-scope="scope">
          <span>{{
            scope.row.account_executive
              ? scope.row.account_executive.company_name
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="customer" label="客户" width="80">
        <template slot-scope="scope">
          <span>{{
            scope.row.customer ? scope.row.customer.customer_name : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="product_name" label="产品" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.product_name.product_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="型号" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.model_number ? scope.row.model_number.model_number : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" width="90">
        <template slot-scope="scope">
          <div v-if="scope.row.models_field">
            <img :src="uploadImgUrl + scope.row.models_field.image" @click="push_img(scope.row)" style="
                cursor: pointer;
                display: block;
                width: 60px;
                display: block;
                margin: 0 auto;
              " />
          </div>
          <img src="../../../src/assets/zwtp.jpg" style="width: 60px; display: block; margin: 0 auto" v-else />
        </template>
      </el-table-column>
      <el-table-column prop="color" label="规格" width="80">
        <template slot-scope="scope">
          <span>{{
            scope.row.specification ? scope.row.specification.specification : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="color" label="颜色" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.color ? scope.row.color.color : '' }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="尺寸" width="80">
        <template slot-scope="scope">
          {{ scope.row.models_field?scope.row.models_field.size:''}}
        </template>
      </el-table-column> -->
      <!-- <el-table-column prop="delivery_date" label="大小" width="120" sortable>
      </el-table-column> -->
      <!-- <el-table-column prop="direction" label="方向" width="70">
      </el-table-column> -->

      <el-table-column prop="order_date" label="订单日期" :formatter="formatterTime" width="120" sortable>
      </el-table-column>
      <el-table-column prop="delivery_date" label="交货日期" :formatter="formatterTime" width="120" sortable>
      </el-table-column>
      <el-table-column prop="receivables" label="应收款" width="120" sortable>
      </el-table-column>
      <!-- <el-table-column prop="received" label="已收款" width="120" sortable>
      </el-table-column> -->
      <!-- <el-table-column prop="received" label="定金" width="120">
      </el-table-column> -->
      <el-table-column label="件数" width="120">
        <template slot-scope="scope">
          {{ scope.row.num }}
        </template>
      </el-table-column>
      <!-- <el-table-column  label="折扣" width="120">
        <template slot-scope="scope">
          {{scope.row.models_field?scope.row.models_field.discount+'%':''}}
        </template>
      </el-table-column>
      <el-table-column  label="余款" width="120">
        <template slot-scope="scope">
          {{scope.row.models_field?scope.row.models_field.residual_payment:''}}
        </template>
      </el-table-column> -->
      <el-table-column label="收款时间" width="120">
        <template slot-scope="scope"> {{ scope.row.models_field ? scope.row.models_field.collection_time : ''
          }}</template>

      </el-table-column>
      <el-table-column label="是否已收余款" width="120">
        <template slot-scope="scope">
          {{ scope.row.is_residual_payment == 1 ? '是' : '否' }}
        </template>
      </el-table-column>

      <el-table-column label="是否补货" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.is_replenishment == 1">是</span>
          <span v-if="scope.row.is_replenishment == 2">否</span>
        </template>
      </el-table-column>
      <el-table-column label="是否备货" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.is_stock_up == 1">是</span>
          <span v-if="scope.row.is_stock_up == 2">否</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="300">
        <template slot-scope="scope">
          <span style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">{{
            scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80" fixed="right">
        <template slot-scope="scope">
          <el-button @click="set_product(scope.row)" type="primary" size="small">审核</el-button>
          <!-- <el-button @click="set_products(scope.row)" type="text" icon="el-icon-edit">修改</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background @prev-click="prev"
        @next-click="next" :current-page.sync="pagination.page" :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
        :page-size="pagination.per_page" layout="sizes,total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="title" :visible.sync="isProduct" width="80%" :close-on-click-modal="false"
      @close="dialog_close_shenhe">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="24">
            <el-form-item label="产品" prop="product_id">
              <el-select filterable v-model="ruleForm.product_id" :disabled="disableds" placeholder="请选择产品"
                style="width: 100%" @change="product_id_change_1">
                <el-option v-for="(item, index) in productList" :key="index" :label="item.product_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-divider content-position="center">基础属性</el-divider> -->
        <div class="list_order" v-if="FieldList.length > 0">
          <!-- <div class="lis" v-if="forEachs('serial_number')">
            <el-form-item label="流水号" :prop="required('serial_number')">
              <el-input
                v-model="ruleForm.serial_number"
                :disabled="disableds"
              ></el-input>
            </el-form-item>
          </div> -->
          <div class="lis" v-if="forEachs('order_number')">
            <el-form-item label="订单号" :prop="required('order_number')">
              <el-input v-model="ruleForm.order_number" :disabled="disableds"></el-input>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('order_date')">
            <el-form-item label="下单日期" :prop="required('order_date')">
              <el-date-picker v-model="ruleForm.order_date" :disabled="disableds" type="date" format="yyyy 年 MM 月 dd 日"
                style="width: 100%" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('delivery_date')">
            <el-form-item label="交货日期" :prop="required('delivery_date')">
              <el-date-picker v-model="ruleForm.delivery_date" :disabled="disableds" type="date"
                format="yyyy 年 MM 月 dd 日" style="width: 100%" value-format="yyyy-MM-dd" placeholder="选择日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('customer_id')">
            <el-form-item label="客户" :prop="required('customer_id')">
              <el-select filterable @change="customer_change" v-model="ruleForm.customer_id" :disabled="disableds"
                placeholder="请选择客户" style="width: 100%">
                <el-option v-for="(item, index) in CustomerList" :key="index" :label="item.customer_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('account_executive_id')">
            <el-form-item label="业务员" :prop="required('account_executive_id')">
              <el-select filterable @change="account_executive_change" v-model="ruleForm.account_executive_id"
                :disabled="disableds" placeholder="请选择业务员" style="width: 100%">
                <el-option v-for="(item, index) in EmployeeList" :key="index" :label="item.company_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('model_number_id')">
            <el-form-item label="型号" :prop="required('model_number_id')">
              <el-select filterable v-model="ruleForm.model_number_id" :disabled="disableds"
                @change="model_number_id_change" placeholder="请选择型号" style="width: 100%">
                <el-option v-for="(item, index) in ModelNumberList" :key="index" :label="item.model_number"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('color_id')">
            <el-form-item label="颜色" :prop="required('color_id')">
              <el-select @change="yanse_change" filterable allow-create v-model="ruleForm.color_id"
                :disabled="disableds" placeholder="请选择颜色" style="width: 100%">
                <el-option v-for="(item, index) in ColorList" :key="index" :label="item.color" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('specification_id')">
            <el-form-item label="规格" :prop="required('specification_id')">
              <el-select @change="guige_change" filterable allow-create v-model="ruleForm.specification_id"
                :disabled="disableds" placeholder="请选择规格" style="width: 100%">
                <el-option v-for="(item, index) in SpecificationList" :key="index" :label="item.specification"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- <div class="lis" v-if="forEachs('direction')">
            <el-form-item label="方向" :prop="required('direction')">
              <el-input v-model="ruleForm.direction" :disabled="disableds"></el-input>
              <el-select filterable allow-create v-model="ruleForm.direction" :disabled="disableds" placeholder="请选择方向"
                style="width: 100%">
                <el-option v-for="(item, index) in directionList" :key="index" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </div> -->
          <div class="lis" v-if="forEachs('is_replenishment')">
            <el-form-item label="是否补录" :prop="required('is_replenishment')">
              <el-radio-group v-model="ruleForm.is_replenishment" :disabled="disableds">
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
        <div class="lis" v-if="forEachs('remark')">
          <el-form-item label="备注" :prop="required('remark')">
            <el-input v-model="ruleForm.remark" type="textarea" :disabled="disableds"
              :autosize="{ minRows: 4 }"></el-input>
          </el-form-item>
        </div>
        <div class="list_order" v-if="FieldList.length > 0">
          <div class="lis" v-if="forEachs('emergency_procedure')">
            <el-form-item label="紧急程度" :prop="required('emergency_procedure')">
              <el-radio-group v-model="ruleForm.emergency_procedure" :disabled="disableds">
                <el-radio label="1">普通</el-radio>
                <el-radio label="2">紧急</el-radio>
                <el-radio label="3">十万火急</el-radio>
              </el-radio-group>
            </el-form-item>

          </div>
          <div class="lis" v-if="forEachs('is_stock_up')">
            <el-form-item label="是否备货" :prop="required('is_stock_up')">
              <el-radio-group v-model="ruleForm.is_stock_up" :disabled="disableds">
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <!-- <div class="lis" v-if="forEachs('is_stock_up')">
            <el-form-item label="是否备货" :prop="required('is_stock_up')">
              <el-radio-group
                v-model="ruleForm.is_stock_up"
                :disabled="disableds"
              >
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div> -->
          <div class="lis" v-if="forEachs('num')">
            <el-form-item label="件数" :prop="required('num')">
              <el-input v-model="ruleForm.num" type="number" :disabled="disableds"></el-input>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('warehouse_id')">
            <el-form-item label="仓库及货架" :prop="required('warehouse_id')">
              <el-select v-model="ruleForm.warehouse_id" :disabled="disableds" placeholder="请选择仓库"
                @change="select_huojiua" style="width: 49%">
                <el-option v-for="(item, index) in cangkulist" :key="index" :label="item.warehouse_name"
                  :value="item.id">
                </el-option>
              </el-select>
              <el-select v-model="ruleForm.goods_shelf_id" :disabled="disableds" placeholder="请选择货架"
                @change="select_goods_shelf" style="width: 50%; margin-left: 1%">
                <el-option v-for="(item, index) in huojialist" :key="index" :label="item.goods_shelf_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('receivables')">
            <el-form-item label="应收款" :prop="required('receivables')">
              <el-input v-model="ruleForm.receivables"></el-input>
            </el-form-item>
          </div>
          <div class="lis" v-if="forEachs('received')">
            <el-form-item label="定金" :prop="required('received')">
              <el-input v-model="ruleForm.received"></el-input>
            </el-form-item>
          </div>
          <div class="lis" v-for="(item, index) in FieldList_new" :key="index">
            <el-form-item :label="item.name">
              <el-input v-if="item.formtype == 'input'" v-model="item.default_value" type="input"
                @input="ewai_input(item.default_value, item.field)"></el-input>
              <el-select v-if="item.formtype == 'select'" v-model="item.default_value" placeholder="请选择"
                @change="ewai_select(item.default_value, item.field)">
                <el-option v-for="(ite, index) in item.option_list" :key="index" :label="ite.option_name"
                  :value="ite.option_id">
                </el-option>
              </el-select>
              <el-input-number @change="ewai_input(item.default_value, item.field)"
                v-if="item.formtype == 'inputnumber'" v-model="item.default_value" :min="1"></el-input-number>
              <el-radio-group v-if="item.formtype == 'radio'" v-model="item.default_value"
                @change="ewai_select(item.default_value, item.field)">
                <el-radio v-for="(ite, index) in item.option_list" :key="index" :label="ite.option_id">{{
                  ite.option_name
                  }}</el-radio>
              </el-radio-group>
              <el-date-picker v-if="item.formtype == 'datetime'" v-model="item.default_value" type="date"
                @change="ewai_select(item.default_value, item.field)" format="yyyy 年 MM 月 dd 日" style="width: 100%"
                value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions">
              </el-date-picker>

              <el-upload class="upload-demo" v-if="item.formtype == 'file'" :action="uploadImg_Url + '/fileUpload'"
                :on-success="url_success" :headers="headers" :on-remove="handleRemove" multiple :limit="1"
                :file-list="fileList" list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>

            </el-form-item>
          </div>

        </div>
      </el-form>


      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="isProduct = false">关闭</el-button>

        <!-- 财务按钮 -->
        <!-- <el-button
          type="primary"
          size="small"
          style="margin-right: 10px"
          @click="submitadd('ruleForm')"
          v-permission="['caiwushenhe']"
          v-if="
            ruleForm.financial_status == 2 && ruleForms.material_status == 1
          "
          >通过</el-button
        > -->
        <!-- 物料按钮 -->
        <!-- <el-button
          type="primary"
          size="small"
          style="margin-right: 10px"
          @click="submitadd('ruleForm')"
          v-permission="['wuliaoshenhe']"
          v-if="ruleForm.material_status==2"
          >通过</el-button
        > -->
        <!-- 订单按钮 -->
        <el-button type="primary" size="small" :loading="loadings" style="margin-right: 10px"
          @click="submitadd('ruleForm')" v-permission="['dingdanshenhe']" v-if="info_status == 2">通过</el-button>

        <el-popconfirm v-permission="['dingdanshenhe_shanchu']" confirm-button-text="确定" cancel-button-text="取消"
          icon="el-icon-info" icon-color="red" title="确定删除此订单吗？" @confirm="del_Order(ruleForm.id)">
          <el-button type="primary" size="small" slot="reference">删除</el-button>
        </el-popconfirm>
      </span>
    </el-dialog>

    <bigimg :imgurl="bigurl" :product="bigproduct" :model_number="bigmodel_number" ref="img_big"></bigimg>

    <!-- <el-dialog title="驳回原因" :visible.sync="isbutongguo" width="40%" :close-on-click-modal="false"
      @close="dialog_close">
      <el-input v-model="butongguo" placeholder="请输入驳回原因"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isbutongguo=false">取消</el-button>
        <el-button type="primary" @click="submitadd(3)">确定</el-button>
      </span>
    </el-dialog>


    <el-dialog title="驳回原因" :visible.sync="showyuanyin" width="40%" :close-on-click-modal="false"
      @close="dialog_close">
      <p>{{bohuiyuanyin}}</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showyuanyin=false">知道了</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {
  createOrder,
  getColorList,
  getSpecificationList,
  auditOrder,
  getAuditOrderList,
  getCustomerList,
  getModelNumberList,
  getProductList,
  delOrder,
  getProductColorList,
  getAuditOrderList_exports,
  createSpecification,
  createColor,
  getProductFieldList,
  getWarehouseList
} from "@/api/product/index";

import { getYeWuYuanList } from "@/api/user";
import bigimg from "@/components/bigimg";
export default {
  components: {
    bigimg,
  },
  data() {
    return {
      info_status: 2,
      headers: {
        token: getToken()
      },
      fileList: [],
      loadings: false,
      disableds_product: false,
      directionList: [
        {
          name: '左'
        },
        {
          name: '右'
        },
        {
          name: '无'
        }
      ],
      loading: true,
      disableds: false,
      SpecificationList_s: [],
      ModelNumberList_s: [],
      ColorList_s: [],
      bigurl: "",
      bigproduct: "",
      bigmodel_number: "",
      // 搜索
      uploadImgUrl: this.$global.imgQianJui,
      uploadImg_Url: this.$global.upurl,
      ModelNumberLists: [],
      ModelNumberList: [],
      order_data: [],
      ser: {
        serial_number: "",
        model_number_id: "",
        order_number: "",
        customer_id: "",
        product_id: "",
        order_date: "",
        is_replenishment: "",
        is_stock_up: "",
        start_time: "",
        end_time: "",
        is_residual_payment: 2,
      },
      CustomerList: [],
      productList: [],

      disabled: false,
      bohuiyuanyin: "",
      showyuanyin: false,
      isbutongguo: false,
      butongguo: "",
      isset: false,
      moreList: [],
      moreLists: {},
      isProducts: false,
      isadd: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      formatterTime(row, column) {
        let data = row[column.property];
        return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data);
      },
      title: "",
      isProduct: false,
      dataList: [],
      ruleForm: {
        num: 1,
        serial_number: "",
        order_number: "",
        order_date: "",
        delivery_date: "",
        account_executive_id: "",
        product_id: "",
        model_number_id: "",
        color_id: "",
        size: "",
        specification_id: "",
        direction: "",
        customer_id: "",
        received: "",
        emergency_procedure: "1",
        is_replenishment: "2",
        is_stock_up: "1",
        receivables: "",
        remark: "",
        warehouse_id:"",
        goods_shelf_id:"",
        id: "",
      },
      ruleForms: {},
      rules: {
        specification_id: [
          {
            required: true,
            message: "请选择规格",
            trigger: "blur",
          },
        ],
        serial_number: [
          {
            required: true,
            message: "请输入流水号",
            trigger: "blur",
          },
        ],
        order_number: [
          {
            required: true,
            message: "请输入订单号",
            trigger: "blur",
          },
        ],
        order_date: [
          {
            required: true,
            message: "请选择下单日期",
            trigger: "blur",
          },
        ],
        delivery_date: [
          {
            required: true,
            message: "请选择交货日期",
            trigger: "blur",
          },
        ],
        account_executive_id: [
          {
            required: true,
            message: "请选择员工",
            trigger: "blur",
          },
        ],
        product_id: [
          {
            required: true,
            message: "请选择产品",
            trigger: "blur",
          },
        ],
        model_number_id: [
          {
            required: true,
            message: "请选择型号",
            trigger: "blur",
          },
        ],
        color_id: [
          {
            required: true,
            message: "请选择颜色",
            trigger: "blur",
          },
        ],
        size: [
          {
            required: true,
            message: "请选择规格",
            trigger: "blur",
          },
        ],
        direction: [
          {
            required: true,
            message: "请输入产品方向",
            trigger: "blur",
          },
        ],
        customer_id: [
          {
            required: true,
            message: "请选择客户",
            trigger: "blur",
          },
        ],
        emergency_procedure: [
          {
            required: true,
            message: "请选择紧急程度",
            trigger: "blur",
          },
        ],
        is_replenishment: [
          {
            required: true,
            message: "是否补货",
            trigger: "blur",
          },
        ],
        is_stock_up: [
          {
            required: true,
            message: "是否备货",
            trigger: "blur",
          },
        ],
        receivables: [
          {
            required: true,
            message: "请输入应收款金额",
            trigger: "blur",
          },
        ],
      },
      pagination: {
        per_page: 20,
        page: 1,
      },
      total: 0,
      EmployeeList: [],
      ColorList: [],
      SpecificationList: [],
      // 指派提交数据
      push_prder: {
        child_order_id: "",
        employee_user_id: "",
      },
      push_more: {},
      pushCustomerList: [], //指定工种员工列表
      // 外包提交
      cangkulist: [],
      huojialist: [],
      order_audit_name: "",
      FieldList: [],
      FieldList_new: [],
      FieldList_news: [],
      order_image: ''
    };
  },
  mounted() {
    this.getlist();
    this.getEmpl();
    this.getColor();
    this.getSpecification();
    this.getproduct();
    this.getModel();
    this.getCustomer();
    this.getcangku()
  },
  watch: {
    "ruleForm.product_id"(news, lods) {
      if (news) {
        if (this.title == '新增订单') {
          this.product_id_change_1(news)
        }

      }
    },
    "ruleForm.warehouse_id"(news, olds){
      if(news){
          this.select_huojiua(news)
      }
    },
    "ruleForm.receivables"(news, olds) {
      let discount_num = this.set_FieldList_news('discount')//折扣
      let num = (Number(news) * Number(discount_num) / 100) - Number(this.ruleForm.received)
      this.set_FieldList_new(num, 'residual_payment')
    },
    "ruleForm.received"(news, olds) {
      let discount_num = this.set_FieldList_news('discount')//折扣
      let num = (Number(this.ruleForm.receivables) * Number(discount_num) / 100) - Number(news)
      this.set_FieldList_new(num, 'residual_payment')
    },
    FieldList_new: {
      handler(news, olds) {
        news.forEach(item => {
          this.$set(this.ruleForm, item.field, item.default_value);
        })
        // this.ruleForm.num = this.ruleForm.cases_num
      },
      deep: true

    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log('删除' + file, fileList);
      this.order_image = ""
    },
    handlePreview(file) {
      console.log(file);
    },
    url_success(file) {
      console.log(file);
      if (file.code == 200) {
        this.$set(this.ruleForm, 'image', file.data.file_url)
        console.log(this.fileList)
        this.order_image = file.data.file_url
      }
      console.log(this.ruleForm)
    },
    select_goods_shelf(val) {
      this.huojialist.forEach((item) => {
        if (val == item.id) {
          this.$set(this.ruleForm, "goods_shelf", item.goods_shelf);
        }
      });
    },
    getcangku() {
      getWarehouseList().then((res) => {
        if (res.code == 200) {
          this.cangkulist = res.data.data;
        }
      });
    },
    set_FieldList_news(type) {
      var num
      this.FieldList_new.forEach(item => {
        if (item.field == type) {
          num = item.default_value
        }
      })
      return num
    },
    set_FieldList_news_input(val, mode) {
      this.FieldList_new.forEach(item => {
        if (item.field == mode) {
          item.default_value = val
        }
      })
    },
    set_FieldList_new(num, type) {
      this.FieldList_new.forEach(item => {
        if (item.field == type) {
          item.default_value = num
        }
      })
    },
    ewai_input(val, mode) {
      if (mode == 'discount') {
        if (val > 100) {
          this.$message.error("折扣需小于100！");
          let num = 0
          this.set_FieldList_new(num, 'discount')
          return false;
        }
        var nums = (Number(val) * Number(this.ruleForm.receivables) / 100) - Number(this.ruleForm.received);
        var num_s = parseInt(nums).toFixed(2);
        this.set_FieldList_new(num_s, 'residual_payment')
      } else {
        this.set_FieldList_news_input(val, mode)
      }
    },
    ewai_select(val, mode) {
      this.set_FieldList_news_input(val, mode)
    },
    customer_change(val) {
      this.CustomerList.forEach((item) => {
        if (val == item.id) {
          this.$set(this.ruleForm, "customer_name", item.customer_name);
        }
      });
    },
    select_huojiua(val) {
      console.log(val);
      this.huojialist = [];
      this.cangkulist.forEach((element) => {
        if (val == element.id) {
          this.huojialist = element.goods_shelf;
          this.$set(this.ruleForm, "warehouse", element.warehouse_name);
          console.log(this.huojialist);
        }
      });
      console.log(this.huojialist);
    },
    product_id_change_1(val) {
      this.ModelNumberList = [];
      this.ColorList = [];
      this.SpecificationList = [];
      this.ruleForm.model_number_id = "";
      this.ruleForm.color_id = "";
      this.ser.model_number_id = "";
      this.ruleForm.specification_id = "";
      this.get_produccolor(val);
      this.get_producModel(val);

      // this.get_ProductFieldList(val);
    },
    get_ProductFieldList(val) {
      getProductFieldList({ product_id: val }).then((res) => {
        if (res.code == 200) {
          this.FieldList = res.data;
          let FieldList_new = [];
          this.FieldList.forEach((item) => {
            if (item.is_default == 2) {
              FieldList_new.push(item);
              this.$nextTick(() => {
                this.$set(this.ruleForm, item.field, item.default_value);
              })
            }
          });

          this.produc_number_id = val;
          this.ruleForm.product_id = val;
          this.productList.forEach((item) => {
            if (val == item.id) {
              this.$set(this.ruleForm, "product_name", item.product_name);
            }
          });

          console.log(this.ruleForm)
          this.get_producModel(val);
          this.get_produccolor(val);
          // this.FieldList_news = FieldList_new;
          this.automatic_GenerationSerialNumber();
          this.auto_maticGenerationOrderNumber();
        }
      });
    },
    account_executive_change(val) {
      this.EmployeeList.forEach((item) => {
        if (val == item.id) {
          this.$set(this.ruleForm, "account_executive", item.company_name);
        }
      });
    },
    required(val) {
      for (let i = 0; i < this.FieldList.length; i++) {
        if (this.FieldList[i].field == val && this.FieldList[i].required == 1) {
          return this.FieldList[i].field;
        }
      }
    },
    forEachs(val) {
      for (let i = 0; i < this.FieldList.length; i++) {
        if (this.FieldList[i].field == val && this.FieldList[i].show == "1") {
          return true;
        }
      }
    },
    get_ProductFieldLists(val, row) {
      getProductFieldList({ product_id: val }).then((res) => {
        if (res.code == 200) {
          this.FieldList = res.data;
          this.FieldList_new = [];
          this.FieldList.forEach((item) => {
            if (item.is_default == 2) {
              this.FieldList_new.push(item);
            }
            if (item.is_default == 2) {
              this.$nextTick(() => {
                this.$set(this.ruleForm, item.field, item.default_value);
              })
            }
          });
          for (let item in row.models_field) {
            // console.log(item)
            this.news_fied(item, row.models_field[item])
          }
        }
      });
    },
    news_fied(type, val) {
      this.FieldList_new.forEach(item => {
        if (item.field == type) {
          if (val) {
            item.default_value = val.toString()
          }
        }
      })
    },
    yanse_change(val) {
      var list = [];
      for (let i = 0; i < this.ColorList.length; i++) {
        list.push(this.ColorList[i].id);
      }
      if (!list.includes(val)) {
        this.create_Color(val);
      }
    },
    create_Color(val) {
      let lists = [];
      let list = [];
      list.push(val);
      lists.push(this.ruleForm.product_id);
      let obj = {
        product_ids: lists,
        color_names: list,
      };
      createColor(obj).then((res) => {
        if (res.code == 200) {
          let lengths = this.ColorList.length;
          this.$set(this.ColorList, lengths, { id: res.data[0], color: val });
          this.get_produccolor(this.ruleForm.product_id);
          let that = this
          setTimeout(() => {
            that.ruleForm.color_id = res.data[0];
          }, 500);
          console.log(this.ColorList);
        }
      });
    },
    guige_change(val) {
      console.log(val);
      var list = [];
      console.log(this.SpecificationList);
      for (let i = 0; i < this.SpecificationList.length; i++) {
        list.push(this.SpecificationList[i].id);
        if (val == this.SpecificationList[i].id) {
          this.$set(this.ruleForm, "specification", this.SpecificationList[i].specification);
          this.ruleForm.receivables = this.SpecificationList[i].jiage
          // this.ruleForm.jianshu=this.SpecificationList[i].jianhshu
          console.log(this.SpecificationList[i].jianshu)
          this.ewai_input(Number(this.SpecificationList[i].jianshu), 'cases_num')
        }
      }
      if (!list.includes(val)) {
        this.update_Specification(val);
      }
    },
    update_Specification(val) {
      let specification_id = [];
      specification_id.push(val);
      let obj = {
        product_id: this.ruleForm.product_id,
        model_number_id: this.ruleForm.model_number_id,
        specification_ids: specification_id,
      };
      createSpecification(obj).then((res) => {
        if (res.code == 200) {

          let lengths = this.SpecificationList.length;
          this.$set(this.SpecificationList, lengths, {
            id: res.data[0],
            specification: val,
          });
          console.log(this.SpecificationList);
          this.model_number_id_changes(
            this.ruleForm.product_id,
            this.ruleForm.model_number_id
          );
        }
        let that = this
        setTimeout(() => {
          this.ruleForm.specification_id = res.data[0];
        }, 500);
      });
    },
    del_Order(id) {
      delOrder({ id }).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.isProduct = false;
          this.getlist();
        }
      });
    },
    onInput() {
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },
    push_img(row) {
      this.bigurl = row.models_field.image;

      // this.bigurl = row.model_number.file.file_url;
      this.bigproduct = row.product_name.product_name;
      this.bigmodel_number = row.model_number.model_number;
      this.$refs.img_big.open();
    },
    // 指定查询
    search(type) {
      if (type == 0) {
        this.pagination.per_page = 10;
        this.pagination.page = 1;
      }
      getAuditOrderList({ ...this.ser, ...this.pagination }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
          if (type == 2) {
            if (res.data.data.length > 0) {
              this.$message.success("正在导出订单列表");
              this.exports_w();
            }
          }
        }
      });
    },
    // 导出
    exports_w() {
      let data = {
        ...this.ser,
        export: 1,
      };
      getAuditOrderList_exports(data).then((res) => {
        //创建一个隐藏的a连接，
        const link = document.createElement("a");
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        link.style.display = "none";
        //设置连接
        link.href = URL.createObjectURL(blob);
        link.download = "审核列表";
        document.body.appendChild(link);
        //模拟点击事件
        link.click();
      });
    },
    searchreset() {
      this.ser = {
        model_number_id: "",
        order_number: "",
        customer_id: "",
        product_id: "",
        order_date: "",
        is_replenishment: "",
        is_stock_up: "",
        start_time: "",
        end_time: "",
      };
      this.getlist();
    },
    //客户列表
    getCustomer() {
      getCustomerList({ per_page: 1000 }).then((res) => {
        if (res.code == 200) {
          this.CustomerList = res.data.data;
        }
      });
    },
    //产品列表
    getproduct() {
      getProductList().then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
        }
      });
    },
    // 型号列表
    getModel() {
      getModelNumberList().then((res) => {
        if (res.code == 200) {
          this.ModelNumberLists = res.data.data;
        }
      });
    },
    model_number_id_change(val) {
      console.log(val);
      this.SpecificationList = [];
      this.ruleForm.specification_id = "";
      this.model_number_id_changes(this.ruleForm.product_id, val);
    },
    order_data_change(val) {
      this.ser.start_time = val[0];
      this.ser.end_time = val[1];
    },

    get_produccolor(id) {
      getProductColorList({ product_id: id }).then((res) => {
        if (res.code == 200) {
          this.ColorList = res.data;
        }
      });
    },
    product_id_change(val) {
      console.log(val);
      this.ser.model_number_id = "";
      this.get_produccolor(val);
      this.get_producModel(val);
    },
    get_producModel(id) {
      getModelNumberList({ product_id: id, field_list: 'id,model_number', is_dropdown: 1 }).then((res) => {
        if (res.code == 200) {
          this.ModelNumberList = res.data.data;
        }
      });
    },
    model_number_id_changes(id, ids) {
      let obj = {
        product_id: id,
        model_number_id: ids,
      };
      getSpecificationList(obj).then((res) => {
        if (res.code == 200) {
          this.SpecificationList = res.data.data;
        }
      });
    },

    db_pushorder(row, type) {
      if (type == 3) {
        this.bohuiyuanyin = row;
        this.showyuanyin = true;
      }
    },
    // 规格列表
    getSpecification() {
      getSpecificationList().then((res) => {
        if (res.code == 200) {
          this.SpecificationList = res.data.data;
        }
      });
    },
    // 颜色列表
    getColor() {
      getColorList().then((res) => {
        if (res.code == 200) {
          this.ColorList = res.data.data;
        }
      });
    },
    // 业务员列表
    getEmpl() {
      getYeWuYuanList().then((res) => {
        if (res.code == 200) {
          this.EmployeeList = res.data;
        }
      });
    },

    getlist() {
      getAuditOrderList({ ...this.pagination, ...this.ser }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },
    // set_products(row) {
    //   console.log(row);
    //   for (let item in rows) {
    //     this.$set(this.ruleForm, item, rows[item]);
    //   }
    //   this.title = "订单修改";
    //   this.isProduct = true;
    //   this.isadd = true;
    //   this.disabled = false;
    // },
    dialog_close_shenhe() {
      this.ruleForm = {}
      this.fileList = []
    },
    async set_product(row) {
      // 移除敏感信息的console.log，或改为适当的日志级别
      // console.log(row)

      // 使用解构赋值简化代码，提高可读性
      const {warehouse_id, goods_shelf_id,info_status, order_number, order_date, delivery_date, account_executive_id, product_id, model_number_id, color_id, specification_id, customer_id, received, emergency_procedure, is_replenishment, is_stock_up, receivables, remark, id, num, models_field, audit_log } = row;
      this.info_status = info_status;
      this.ruleForm = {
        order_number,
        order_date,
        delivery_date,
        account_executive_id,
        product_id,
        model_number_id,
        color_id,
        specification_id,
        customer_id,
        received,
        emergency_procedure,
        is_replenishment,
        is_stock_up,
        receivables,
        remark,
        id,
        num,
        goods_shelf_id,
        warehouse_id,
        image: models_field ? models_field.image : "",
        // 确保image赋值操作只执行一次
      };

      this.order_image = this.ruleForm.image;
      if (this.order_image) {
        this.fileList.push({ url: this.uploadImgUrl + this.order_image });
      }

      // 调用函数简化赋值逻辑
      this.handleOrderAuditName(audit_log);

      // 异步操作改用async/await结构，提高可读性并统一错误处理
      try {
        await this.fetchModelNumberList();
        await this.fetchColorList();
        await this.fetchSpecificationList();
      } catch (error) {
        console.error("Failed to fetch lists:", error);
        // 可以进一步处理错误，例如显示用户友好的错误消息
      }

      this.product_id_change(product_id);
      this.get_producModel(product_id);
      this.get_produccolor(product_id);
      this.model_number_id_changes(product_id, model_number_id);
      this.get_ProductFieldLists(product_id, row);

      this.title = "订单审核";
      this.isProduct = true;
      this.isadd = true;
      // 确保代码清晰，无冗余
    },

    // 提取方法简化赋值逻辑
    handleOrderAuditName(audit_log) {
      console.log(audit_log)
     
      const orderAuditNames = ["info_status", "material_status", "financial_status"];
      this.order_audit_name = audit_log.find((item) => item.res === 0 && orderAuditNames.includes(item.order_audit_name))?.order_audit_name || "info_status"; // 默认值为空字符串
      console.log(this.order_audit_name)
      debugger
    },
   

    // 异步操作封装，便于统一错误处理和代码清晰
    async fetchModelNumberList() {
      const res = await getModelNumberList({ per_page: 1000 });
      if (res.code === 200) {
        this.ModelNumberList_s = res.data.data;
      }
    },

    async fetchColorList() {
      const res = await getColorList({ per_page: 1000 });
      if (res.code === 200) {
        this.ColorList_s = res.data.data;
      }
    },

    async fetchSpecificationList() {
      const res = await getSpecificationList({ per_page: 1000 });
      if (res.code === 200) {
        this.SpecificationList_s = res.data.data;
      }
    },

    dialog_close() {
      this.ruleForm = {

      };
    },
    submitadd(formName) {
      this.ruleForm.image = this.order_image
      this.$refs[formName].validate((valid) => {
        this.loadings = true
        if (valid) {
          createOrder(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.isProduct = false;
              this.loadings = false
              this.shenhe_sub();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    shenhe_sub() {
      let query = {
        id: this.ruleForm.id,
        status: "1",
        remark: this.butongguo,
        field: this.order_audit_name,
      };
      auditOrder(query).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "提交成功",
            type: "success",
          });
          this.isProduct = false;
          this.isbutongguo = false;
          this.getlist();
        }
      });
    },
    // submitadd(status) {
    //   this.submitadds()
    //   if(this.order_audit_name=='问题订单'){
    //     this.$message({
    //       type: "error",
    //       message: "当前订单已被驳回",
    //     });
    //     return false;

    //   }else{
    //     if(status==3){
    //       if(this.butongguo==''){
    //           this.$message({
    //             type: "error",
    //             message: "请输入驳回原因",
    //           });
    //           return false;
    //       }
    //     }
    //   let query = {
    //     id: this.ruleForm.id,
    //     status,
    //     remark:this.butongguo,
    //     field:this.order_audit_name,
    //   };
    //   auditOrder(query).then((res) => {
    //     if (res.code == 200) {
    //       this.$message({
    //         message: "提交成功",
    //         type: "success",
    //       });

    //       this.isProduct = false;
    //       this.isbutongguo=false
    //       this.getlist();
    //     }
    //   });
    // }
    // },
    handleSizeChange(val) {
      console.log(val);
      console.log(`每页 ${val} 条`);
      this.pagination.per_page = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getlist();
    },
    prev() {
      this.pagination.page = this.pagination.page - 1;
      this.getlist();
    },
    next() {
      console.log("ss");
      this.pagination.page = this.pagination.page + 1;
      this.getlist();
    },
  },
};
</script>

<style scoped>
.line {
  width: 65px;
  height: 65px;
  border-radius: 65px;
  color: #fff;
  background: #6880c6;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tongguo {
  background: #17a33d !important;
}

.weishenhe {
  background: #4970e5 !important;
}

.bohui {
  background: #b13131 !important;
}

.list_order {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  place-items: left;
}

.list_order .lis {
  width: 100%;
}
</style>
